<!--
 * @Author: LiYuan
 * @Date: 2021-10-09 10:17:20
 * @LastEditTime: 2021-10-27 10:21:50
 * @LastEditors: LiYuan
 * @Description: 新服务报告功能介绍
 * You build it, You run it.
-->
<template>
  <el-dialog :title="$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle')" :visible.sync="dialogVisible" top='5vh' width="80%">
    <div class="function-intro-content">
      <h4 class="title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle1')}}</h4>
      <div class="content part-1">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle2')}}</div>

      <h4 class="title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle3')}}</h4>
      <div class="content part-2">
        <div class="mar-b-8">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle4')}}</div>
        <div class="second-title mar-b-12">
          {{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle5[0]')}}
          <br/>
          {{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle5[1]')}}
          <el-row :gutter='20' class="img-box mar-t-12">
            <el-col :span="8"><el-image :src="ServiceReport1_1" :preview-src-list='row1List'/></el-col>
            <el-col :span="8"><el-image :src="ServiceReport1_2" :preview-src-list='row1List'/></el-col>
          </el-row>
        </div>
        <div class="second-title mar-b-12">
          {{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle6[0]')}}
          <br/>
          {{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle6[1]')}}
          <span class="color-orange">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle7')}}</span>。
          {{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle8')}}

          <el-row :gutter='20' class="img-box mar-t-12">
            <el-col :span="6"><el-image :src="ServiceReport2_1" :preview-src-list='row2List'/></el-col>
            <el-col :span="6"><el-image :src="ServiceReport2_2" :preview-src-list='row2List'/></el-col>
            <el-col :span="6"><el-image :src="ServiceReport2_3" :preview-src-list='row2List'/></el-col>
            <el-col :span="6"><el-image :src="ServiceReport2_4" :preview-src-list='row2List'/></el-col>
          </el-row>
        </div>
      </div>

      <h4 class="title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle9')}}</h4>
      <div class="content part-3">
        <ul>
          <li class="mar-b-18">
            <div class="second-title mar-b-12">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle10')}}</div>
            <ul class="inner-list">
              <li class="mar-b-8">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle11')}}</li>
              <li class="mar-b-8">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle12')}}</li>
              <li>{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle13')}}</li>
            </ul>
          </li>
          <li>
            <div class="second-title mar-b-12">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle14')}}</div>
             <ul class="inner-list">
              <li class="mar-b-8">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle15')}}</li>
              <li class="mar-b-8">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle16')}}</li>
              <li class="mar-b-8">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle17')}}</li>
              <li>{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle18')}}</li>
             </ul>
          </li>
        </ul>
      </div>

      <h4 class="title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle19')}}</h4>
      <div class="content part-4">
        <div class="question second-title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle20')}}</div>
        <div class="answer">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle21')}}</div>
        <div class="question second-title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle22')}}</div>
        <div class="answer">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle23')}}</div>
        <div class="question second-title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle24')}}</div>
        <div class="answer">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle25')}}</div>
        <div class="question second-title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle26')}}</div>
        <div class="answer">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle27')}}</div>
        <div class="question second-title">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle28')}}</div>
        <div class="answer">
          {{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle29')}}
          <span class="color-orange">{{$t('task.setting.taskTypeSetting.flow.components.serviceReportTitle30')}}</span>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">{{$t('common.base.close')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLocalesOssUrl } from '@src/util/assets'
const ServiceReport1_1 = getLocalesOssUrl('/setting/service_report_1-1.png')
const ServiceReport1_2 = getLocalesOssUrl('/setting/service_report_1-2.png')
const ServiceReport2_1 = getLocalesOssUrl('/setting/service_report_2-1.png')
const ServiceReport2_2 = getLocalesOssUrl('/setting/service_report_2-2.png')
const ServiceReport2_3 = getLocalesOssUrl('/setting/service_report_2-3.png')
const ServiceReport2_4 = getLocalesOssUrl('/setting/service_report_2-4.png')
export default {
  name: 'function-intro-dialog',
  data() {
    return {
      ServiceReport1_1,
      ServiceReport1_2,
      ServiceReport2_1,
      ServiceReport2_2,
      ServiceReport2_3,
      ServiceReport2_4,
      row1List: [ServiceReport1_1, ServiceReport1_2],
      row2List: [ServiceReport2_1, ServiceReport2_1, ServiceReport2_3, ServiceReport2_4],
      dialogVisible: false
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  height: 90vh;
  max-width: 1000px;
  .el-dialog__header {
    text-align: center;
  }
}
::v-deep .el-dialog__body {
  height: calc(100% - 108px);
  overflow: auto;
}
.title {
  font-size: 16px;
  color: #262626;
  margin-bottom: 12px;
}
.content {
  margin-bottom: 24px;
  padding-left: 31px;
  color: #262626;
  ul, li {
    padding-left: 0;
  }
  .inner-list {
    padding-left: 15px;
  }
}
.part-2 {
  .img-box {
    img {
      width: 100%;
    }
  }
}
.part-4 {
  .question {
    margin-bottom: 8px;
    margin-top: 15px;
  }
  .answer {
    font-size: 14px;
    padding-left: 15px;
  }
}
.second-title {
  font-size: 14px;
  font-weight: bold;
}
.color-orange {
  color:#FFA726;
}
</style>